<template>
  <div class="container">
    <div class="title">我的钱包</div>
    <div class="detailed">
      <div class="mouny">￥ {{ this.money }}</div>
      <div class="text">
        <div>账户余额</div>
        <div @click="binding">绑定银行卡<van-icon name="arrow" /></div>
      </div>
    </div>
    <div class="Withdrawal">
      <van-field
        v-model="sms"
        center
        label=""
        type="number"
        placeholder="请输入提现金额"
      >
        <template #button>
          <van-button size="small" round type="primary" @click="walletFn"
            >提 现</van-button
          >
        </template>
      </van-field>
    </div>
    <div class="wallet">
      <div class="waTitle">账户明细</div>
      <div class="content" v-for="(item, index) in apply" :key="index">
        <div :class="item.type == 0 ? 'plas' : 'cut'">￥ {{ item.price }}</div>
        <div class="time">
          {{ item.create_date_str }} {{ item.create_date }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetailed, applyWithdrawal, getUserInfo } from "../../api/api";
export default {
  data() {
    return {
      data: {},
      sms: "",
      apply: [],
      money: "",
      tixianPrice: Number(JSON.parse(localStorage.getItem('config')).tixian_price)
    };
  },
  methods: {
    walletFn() {
      if (this.sms <= 0 || Number(this.sms) > Number(this.money) || this.sms == "")
        return this.$toast.fail("请填写正确金额");
      if (this.sms < this.tixianPrice) return  this.$toast.fail(`佣金小于${this.tixianPrice}不可提现`);
      let data = {
        user_id: localStorage.getItem("userId"),
        price: this.sms,
      };
      applyWithdrawal(data).then((res) => {
        console.log("提现申请接口回调---", res);
        this.$toast.clear()
        if (res.msg == "提现余额不足") {
          this.$toast.fail(res.msg);
        } else {
          this.getMoney()
        }
      });
    },
    binding() {
      this.$router.push("/binding");
    },
    getInfo() {
      getDetailed({ user_id: localStorage.getItem("userId") }).then((res) => {
        console.log("账户明细接口回调---", res.data.rows);
        this.$toast.clear()
        res.data.rows.forEach((item) => {
          let str = item.create_date_str + "";
          str = str.substring(4).split("");
          str.splice(2, 0, "-");
          item.create_date_str = str.join("");
          let data = new Date(item.create_date * 1000);
          let hours = data.getHours();
          let minutes = data.getMinutes();
          console.log(data);
          item.create_date = `${hours}:${minutes}`;
        });

        this.apply = res.data.rows;
      });
    },
    getMoney() {
      let data = {
        user_id: localStorage.getItem("userId"),
      };
      getUserInfo(data).then((res) => {
        this.money = res.data.money;
        console.log("获取用户信息接口---", res.data);
      });
    },
  },
  mounted() {
    this.getInfo();
    this.getMoney()
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  background-color: #f1f1f1;
  min-height: 100vh;
  .title {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 1.2em;
    background-color: #fff;
  }
  .detailed {
    width: 100%;
    height: calc(25vh - 60px);
    padding: 0 4%;
    overflow: auto;
    background-color: #fff;
    color: #fff;
    position: relative;
    background-color: #3ace8a;

    .mouny {
      font-size: 2em;
      position: absolute;
      top: 40%;
      transform: translateY(-50%);
    }

    .text {
      width: 94%;
      font-size: 0.7em;
      color: #f1f1f1;
      position: absolute;
      bottom: 15%;
      letter-spacing: 1px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .Withdrawal {
    padding: 0 4%;
    width: 100%;
    height: 60px;
    margin-top: 10px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    .van-button__content {
      width: 60px;
    }
  }
  .wallet {
    width: 100%;
    margin-top: 10px;
    padding: 30px 4%;
    background-color: #fff;

    .waTitle {
      color: #333333;
      font-size: 1.1em;
      font-weight: 700;
      letter-spacing: 1px;
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e5e5;
    }

    .content {
      margin-top: 10px;
      font-size: 0.9em;
      //   font-weight: 700;
      padding-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;

      .time {
        font-size: 0.6em;
        color: #999999;
      }

      .plas {
        color: #3ace8a;
      }
      .cut {
        color: #d00707;
      }
    }
  }
}
</style>